<!--
 * @Description: 主题切换
 * @Author: zhanyinjia
 * @Date: 2023-02-06 17:24:46
 * @LastEditors: zhanyinjia
 * @LastEditTime: 2024-07-23 11:10:47
-->
<template>
  <div>
    <p>当前模式：{{ theme }}</p>
    <br />
    <el-button
      :type="theme == 'dark' ? 'primary' : ''"
      @click="saveSession('dark')"
    >暗黑</el-button>
    <el-button
      :type="theme == 'light' ? 'primary' : ''"
      @click="saveSession('light')"
    >白天</el-button>
    <el-button
      class="mr10"
      @click="openLabel"
    >window.open打开一个新标签</el-button>
    <a
      href="http://192.168.29.122:8090/common/theme"
      target="_blank"
      style="color: #0f0"
      class="mr10"
    >打开新标签</a>
    <a
      href="http://192.168.29.122:8090/common/theme"
      target="_blank"
      rel="opener"
    >打开新标签，会复制之前页面的sessionStorage</a>

    <hr />
    <div class="flex f-y-c">
      <mark>src="../../assets/images/avator.png"</mark>
      <img
        src="../../assets/images/avator.png"
        alt=""
      />
      <hr />
    </div>
    <div class="flex f-y-c">
      <mark>:src="../../assets/images/avator.png"</mark>
      <img
        :src="'../../assets/images/avator.png'"
        alt="图片无法显示"
      />
      <hr />
    </div>
    <div class="flex f-y-c">
      <mark>:src="require('../../assets/images/avator.png')"</mark>
      <img
        :src="require('../../assets/images/avator.png')"
        alt=""
      />
      <hr />
    </div>
  </div>
</template>

<script>
export default {
  name: 'theme',
  data() {
    return {
      theme: ''
    }
  },
  created() {
    this.theme = sessionStorage.getItem('theme')
  },
  methods: {
    openLabel() {
      window.open('http://192.168.29.122:8090/common/theme')
    },
    saveSession(type) {
      sessionStorage.setItem('theme', type)
      this.theme = type
    }
  }
}
</script>

<style lang="" scoped>
</style>